<template>
  <div id="app">
    <div class="home-main">
      <home-hall v-show="active === 0" :active="active" />
      <home-task v-show="active === 1" :active="active" />
      <home-record v-show="active === 2" />
      <home-mine v-show="active === 3" />
    </div>
    <van-tabbar v-model="active" active-color="#e4393c" inactive-color="#000">
      <van-tabbar-item icon="home-o">大厅</van-tabbar-item>
      <van-tabbar-item icon="search">任务</van-tabbar-item>
      <van-tabbar-item icon="friends-o">推广</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import HomeHall from "./HomeHall";
import HomeTask from "./HomeTask";
import HomeRecord from "./HomeRecord";
import HomeMine from "./HomeMine";
import { closeApp } from "@/utils/index";
export default {
  name: "App",
  components: { HomeHall, HomeTask, HomeRecord, HomeMine },
  data() {
    return {
      active: 0
    };
  },
  watch: {
    // 底部导航菜单
    active(newVal) {
      // 存 store
      this.$store.commit("SET_ACTIVEINDEX", newVal);
      this.$storage.set("activeIndex", newVal);
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        closeApp();
      }, 2000);
    });
  }
};
</script>

<style lang="scss" scoped>
.home-wrapper {
  width: 100%;
  height: 100%;
  .home-main {
    width: 100%;
    height: calc(100vh - 50px);
    overflow: hidden;
  }
}
</style>
